<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="/zhihu1/css/menus.css" />
    <script src="/zhihu1/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
</head>

<body>
<div class="div-box">
    <div class="div-left" id="div-left">
        <ul>
            <li>
                <a id="examine">
                    <img src="/zhihu1/imgs/menus-img/examine.png" class="left-img"/>&nbsp;
                    审核管理
                    <img id="examine-img" class="right-img"/>
                </a>
                <ul id="examines" style="display: none;">
                    <li id="li-examine"><a href="#">帖子审核</a></li>
                </ul>
            </li>
            <li>
                <a id="report">
                    <img src="/zhihu1/imgs/menus-img/report.png" class="left-img"/>&nbsp;
                    举报管理
                    <img id="report-img" class="right-img"/>
                </a>
                <ul id="reports" style="display: none;">
                    <li id="user_report"><a href="#">用户举报</a></li>
                    <li id="post_report"><a href="#">帖子举报</a></li>
                    <li id="comment_report"><a href="#">评论举报</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="openbtn change" onclick="toggleNav(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>

    <div class="div-right" id="div-right">
        <div class="div-top"></div>
        <div id="div-bottom">
            <div id="div-table">

            </div>
            <div class="page-div">
                <a href="#" id="previous">上一页</a>
                <a href="#" id="current"></a>
                <a href="#" id="next">下一页</a>&nbsp&nbsp&nbsp&nbsp
                总共<span id="total"></span>页
                总共<span id="count"></span>条
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        let userId = 0;
        let page = 1;
        let limit = 5;
        let total = 0;

        selectUser();
        selectCard();
        $("#li-examine").on("click", function () {
            $("#div-table").html("");
            pageReduction();
            selectCard();
        })

        $("#user_report").on("click", function () {
            $("#div-table").html("");
            pageReduction();
            selectReportUser();
        })

        $("#post_report").on("click", function () {
            $("#div-table").html("");
            pageReduction();
            selectReportCard();
        })

        $("#comment_report").on("click", function () {
            $("#div-table").html("");
            pageReduction();
            selectReportComment();
        })

        $("#report").on("click", function () {
            if ($("#li-ul").css("display") == 'block') {
                $("#li-ul").css("display", "none");
            } else {
                $("#li-ul").css("display", "block");
            }
        })

        $("#examine-img").attr("src", "/zhihu1/imgs/menus-img/arrow-bottom.png");
        $("#report-img").attr("src", "/zhihu1/imgs/menus-img/arrow-bottom.png");

        $("li a[href='#']").click(function () {
            emptyBackgroundColor();
            //获取当前标签对象
            $(this).css("background-color", "#36b269");
            $(this).css("color", "#ffffff");
        })

        $("#examine").on("click", function (event) {
            if ($("#examines").css("display") === "none") {
                $("#examines").css("display", "block");
                emptyBackgroundColor();
                $("#examine-img").attr("src", "/zhihu1/imgs/menus-img/arrow-top.png");
            } else {
                $("#examines").css("display", "none");
                emptyBackgroundColor();
                $("#examine-img").attr("src", "/zhihu1/imgs/menus-img/arrow-bottom.png");
            }
        })

        $("#report").on("click", function (event) {
            if ($("#reports").css("display") === "none") {
                $("#reports").css("display", "block");
                emptyBackgroundColor();
                $("#report-img").attr("src", "/zhihu1/imgs/menus-img/arrow-top.png");
            } else {
                $("#reports").css("display", "none");
                emptyBackgroundColor();
                $("#report-img").attr("src", "/zhihu1/imgs/menus-img/arrow-bottom.png");
            }
        })

        let oprevious = $("#previous");
        oprevious.on("click", function () {
            if (page > 1) {
                page--;
                let tClass = $("#table").attr("class")
                $("#div-table").html("");
                if(tClass == "card"){
                    selectCard();
                }else if(tClass == "reportCard"){
                    selectReportCard()
                }else if(tClass == "reportComment"){
                    selectReportComment();
                }else if(tClass == "reportUser"){
                    selectReportUser()
                }
            } else {
                alert("已经到第一页了")
            }
        })

        let onext = $("#next");
        onext.on("click", function () {
            if (page != total) {
                page++;
                let tClass = $("#table").attr("class")
                $("#div-table").html("");

                if(tClass == "card"){
                    selectCard();
                }else if(tClass == "reportCard"){
                    selectReportCard()
                }else if(tClass == "reportComment"){
                    selectReportComment();
                }else if(tClass == "reportUser"){
                    selectReportUser()
                }
            } else {
                alert("已经到最后一页了")
            }
        })

        function pageReduction() {
            page = 1;
            limit = 5;
            total = 0;
        }

        function selectUser() {
            $.ajax({
                async: true,
                url: "http://localhost:8080/zhihu1/user?ac=selectUser",
                type: "post",
                data: {
                    username: '${admin}'
                },
                dataType: "json",
                success: function (data) {
                    userId = data.data[0].id;
                }
            })
        }

        function updateCard(id, status, url) {
            $.ajax({
                async: true,
                url: "http://localhost:8080/zhihu1/back/admin?ac=" + url,
                type: "post",
                data: {
                    id: id,
                    status: status,
                    userId: userId
                },
                dataType: "json",
                success: function (data) {
                    if (data.data == true) {
                        total--;
                        $('#table tr td:first-child:contains("' + id + '")').parent().remove();
                    }
                }
            })
        }

        function selectCard() {
            $.ajax({
                async: true,
                url: "http://localhost:8080/zhihu1/back/admin?ac=selectCard",
                type: "post",
                data: {
                    page: page,
                    limit: limit
                },
                dataType: "json",
                success: function (data) {
                    let ocurrent = $("#current");
                    let ototal = $("#total");
                    ototal.html(data.data.total)
                    let ocount = $("#count");
                    ocount.html(data.data.count)
                    ocurrent.html(page);
                    total = data.data.total;

                    let columnHeaders = {
                        'id': '序号',
                        'user_name': '用户名',
                        'title': '标题',
                        'Buttons': '操作',
                    };
                    newTable(data.data.data, columnHeaders, 'card')
                }
            })
        }

        function newTable(data, columnHeaders, str) {
            let columnsToDisplay = Object.keys(columnHeaders);
            let table = $('<table>').attr("id", "table").attr("class",str).attr("cellspacing","0").attr("cellpadding","0").appendTo('#div-table');

            let thead = $('<thead>').appendTo(table);
            let headerRow = $('<tr>').appendTo(thead);
            columnsToDisplay.forEach(function (column) {
                let columnHeader = columnHeaders[column] || column;
                $('<th>').text(columnHeader).appendTo(headerRow);
            });

            let tbody = $('<tbody>').appendTo(table);
            data.forEach(function (rowData) {
                let row = $('<tr>').appendTo(tbody);
                columnsToDisplay.forEach(function (column) {
                    if (column === 'title') {
                        $('<td>').addClass('td-title').html('<a href="#" onclick="contentText(\'' + rowData['card_content'] + '\', \'' + rowData['title'] + '\')">' + rowData['title'] + '</a>'
                        ).appendTo(row);
                    }
                    if(column === 'comment_content'){
                        $('<td>').addClass('td-title').html('<a href="#" onclick="commentText(\'' + rowData['comment_content'] + '\')">' + rowData['comment_content'] + '</a>'
                        ).appendTo(row);
                    }
                    if (column === 'Buttons') {
                        let buttonCell = $('<td>').appendTo(row);
                        let button1 = $('<button>').addClass("button1")
                            .text('通过')
                            .appendTo(buttonCell);

                        let button2 = $('<button>').addClass("button2")
                            .text('作废')
                            .appendTo(buttonCell);

                        button1.on('click', function () {
                            let isConfirmed = confirm("请确认是否通过！");
                            if (isConfirmed) {
                                if (str == 'card') {
                                    updateCard(rowData['id'], 1, 'updateCard');
                                } else if (str == 'reportComment') {
                                    updateCard(rowData['id'], 1, 'updateReportComment');
                                } else if (str == 'reportCard') {
                                    updateCard(rowData['id'], 1, 'updateReportCard');
                                } else if (str == 'reportUser') {
                                    updateCard(rowData['id'], 1, 'updateReportUser');
                                }
                            }
                        });

                        button2.on('click', function () {
                            let isConfirmed = confirm("请确认是否作废！");
                            if (isConfirmed) {
                                if (str == 'card') {
                                    updateCard(rowData['id'], 2, 'updateCard');
                                } else if (str == 'reportComment') {
                                    updateCard(rowData['id'], 2, 'updateReportComment');
                                } else if (str == 'reportCard') {
                                    updateCard(rowData['id'], 2, 'updateReportCard');
                                } else if (str == 'reportUser') {
                                    updateCard(rowData['id'], 2, 'updateReportUser');
                                }
                            }
                        });
                    } else {
                        if (column != 'title' && column != 'comment_content') {
                            $('<td>').text(rowData[column]).appendTo(row);
                        }
                    }
                });
            });
        }

        function selectReportUser() {
            $.ajax({
                async: true,
                url: "http://localhost:8080/zhihu1/back/admin?ac=selectReportUser",
                type: "post",
                data: {
                    page: page,
                    limit: limit
                },
                dataType: "json",
                success: function (data) {
                    let ocurrent = $("#current");
                    let ototal = $("#total");
                    ototal.html(data.data.total)
                    let ocount = $("#count");
                    ocount.html(data.data.count)
                    ocurrent.html(page);
                    total = data.data.total;

                    let columnHeaders = {
                        'id': '序号',
                        'user_name': '被举报的用户',
                        'user_name1': '举报的用户',
                        'report_reason': '举报理由',
                        'content': '举报理由内容',
                        'Buttons': '操作',
                    };
                    newTable(data.data.data, columnHeaders, 'reportUser')
                }
            })
        }

        function selectReportCard() {
            $.ajax({
                async: true,
                url: "http://localhost:8080/zhihu1/back/admin?ac=selectReportCard",
                type: "post",
                data: {
                    page: page,
                    limit: limit
                },
                dataType: "json",
                success: function (data) {
                    let ocurrent = $("#current");
                    let ototal = $("#total");
                    ototal.html(data.data.total)
                    let ocount = $("#count");
                    ocount.html(data.data.count)
                    ocurrent.html(page);
                    total = data.data.total;

                    let columnHeaders = {
                        'id': '序号',
                        'user_name': '举报的用户',
                        'title': '帖子标题',
                        'report_reason': '举报理由',
                        'content': '举报理由内容',
                        'Buttons': '操作',
                    };
                    newTable(data.data.data, columnHeaders, 'reportCard')
                }
            })
        }

        function selectReportComment() {
            $.ajax({
                async: true,
                url: "http://localhost:8080/zhihu1/back/admin?ac=selectReportComment",
                type: "post",
                data: {
                    page: page,
                    limit: limit
                },
                dataType: "json",
                success: function (data) {
                    let ocurrent = $("#current");
                    let ototal = $("#total");
                    ototal.html(data.data.total)
                    let ocount = $("#count");
                    ocount.html(data.data.count)
                    ocurrent.html(page);
                    total = data.data.total;

                    let columnHeaders = {
                        'id': '序号',
                        'user_name': '举报的用户',
                        'comment_content': '评论内容',
                        'report_reason': '举报理由',
                        'content': '举报理由内容',
                        'Buttons': '操作',
                    };
                    newTable(data.data.data, columnHeaders, 'reportComment')
                }
            })
        }
    })

    function emptyBackgroundColor() {
        let arr = $("a");
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != this) {
                arr[i].style = "background-color:'';color:'';";
            }
        }
    }

    function toggleNav(x) {
        let sidebar = $("#div-left");
        let mainContent = $("#div-right");
        let openButton = $(".openbtn");

        x.classList.toggle("change");

        if (sidebar.width() === 250) {
            sidebar.width(0);
            mainContent.css("margin-left", 0);
            openButton.css("left", 0);
        } else {
            sidebar.width(250);
            mainContent.css("margin-left", 250);
            openButton.css("left", 250);
        }
    }

    function contentText(content,title){
        $.alert({
            title: title,
            content: content,
        });
    }
    function commentText(content){
        $.alert({
            title: "评论内容",
            content: content,
        });
    }
</script>

</html>